/** @jsxImportSource @emotion/react */
import * as React from "react";
import {InputLine, Select} from "customize-easy-ui-component";

import {Dispatch, SetStateAction, } from "react";
import {css} from "@emotion/react";
import {子设备品种, 设备品种, 设备种类, 设备类别} from "../dict/eqpComm";


interface DeviceClassSelectProps {
    eqp: any;
    //直接设置返回的状态变量。 不可编辑的只读场景：=null
    setSelectClass?: Dispatch<SetStateAction<any>>;
}

/**提取可复用组件:
 * 设备种类 的几个字段显示和输入编辑选择。
 * 为了贴合anchor定位 #subv 做了妥协。URL末尾加上#subv就能滚动到了subv组件显示。
 */
export const DeviceClassSelect= ({ eqp,setSelectClass, ...other }:DeviceClassSelectProps) =>
{
    //因为本组件内容贴近靠近 fixed 工具条的。"厂车""游乐"两个要配合 <HashLinkObserver />才行！。
    //为了确保<HashLinkObserver />定位显示anchor到位,只好添加一层<div  id={"subv"}>来衬托，否则更加不好需要往下拉动一点会被工具条遮盖焦点。确保这个div拉下一个工具条高度距离。
  return (
   <React.Fragment>

           <InputLine label={`设备种类:`}>
               <Select inputSize="md" css={{minWidth:'140px',fontSize:'1rem',padding:'0 1rem'}} divStyle={css`max-width:240px;`}
                       value={eqp?.type || ''}  disabled={!setSelectClass}
                       onChange={e => {
                           setSelectClass!({...eqp, type: e.currentTarget.value||undefined, sort:undefined, vart:undefined});
                       }
                       }
               >
                   <option value={''}>全部</option>
                   {
                       Object.entries(设备种类).map(([key,value],i) => (
                           <option key={i} value={key}>{value}</option>
                       ))
                   }
               </Select>
           </InputLine>
           <InputLine label={`设备类别:`}>
               <Select inputSize="md"  divStyle={css`max-width:240px;`}
                       value={eqp?.sort || ''}  disabled={!setSelectClass}
                       onChange={e =>{
                           setSelectClass!({...eqp, sort: e.currentTarget.value||undefined, vart:undefined });
                       } }
               >
                   {
                       Object.entries(设备类别[eqp?.type]||{}).map(([key,value],i) => (
                           <option key={i} value={key}>{value as string}</option>
                       ))
                   }
                   <option value={''}>全部</option>
               </Select>
           </InputLine>

       <div  id={"subv"}>
           <InputLine label={`设备品种:`}>
               <Select inputSize="md"  divStyle={css({ maxWidth:'240px' })}
                       value={eqp?.vart || ''}  disabled={!setSelectClass}
                       onChange={e => setSelectClass!({...eqp, vart: e.currentTarget.value||undefined}) }
               >
                   {
                       Object.entries(设备品种[eqp?.sort]||{}).map(([vkey,vvalue],i) => (
                           <option key={i} value={vkey}>{vvalue as string}</option>
                       ))
                   }
                   <option value={''}>全部</option>
               </Select>
           </InputLine>
           <InputLine label={`子设备品种:`}>
               <Select id="subv"  inputSize="md"  divStyle={css({ maxWidth:'240px' })}
                       value={eqp?.subv || ''}
                       onChange={e => setSelectClass!({...eqp, subv: e.currentTarget.value||undefined}) }
               >
                   {
                       Object.entries(子设备品种[eqp?.sort]||{}).map(([vkey,vvalue],i) => (
                           <option key={i} value={vkey}>{vvalue as string}</option>
                       ))
                   }
                   <option value={''}>全部</option>
               </Select>
           </InputLine>
       </div>
   </React.Fragment>
  );
}


/*原来有做了逻辑排除
(eqp?.subv || setSelectClass) &&
           <InputLine label={`子设备品种:`}>   <Select   disabled={!setSelectClass}
上面加了       <HashLinkObserver />
           <InputLine label={`子设备品种:`}>   也是会被工具条遮挡住了 anchor定位毛病。
把anchor定位腾挪到了更大的窗口div内容上面， <div  id={"subv"}> 可能导致指定区域突出显示，但是不会专门突出显示目标哪个input,能够确保滚动出来input。
* */
